import React, {useEffect, useState} from "react";
import {Button, Text, View} from "native-base";
import {StyleSheet} from "react-native";
import {NewNavLeft} from "./newNavLeft";
import {NewNavRight} from "./newNavRight";

export const NewAcientNav = ({navigation, route}) => {
    const [leftData, setLeft] = useState('1');
    const [rightData, setRight] = useState({});
    const [cut, setCut] = useState(true);

    useEffect(()=>{
        dataMsg();
    }, [route.params.datas])

    async function dataMsg(){
        const msg = route.params.datas;
        const photo1T = msg[0].replace(/\'/g, "").replace(/\(/g, "").replace(/\[/g, "").replace(/\]/g, "").split(",");
        const isBookT = msg[5].replace(/\'/g, "").replace(/\[/g, "").replace(/\]/g, "").split(",");
        const laiyuanT = msg[1].replace(/\'/g, "").replace(/\[/g, "").replace(/\]/g, "").split(",");
        const nameT = msg[3].replace(/\'/g, "").replace(/\[/g, "").replace(/\]/g, "").split(",");
        const left = { isBook: [], laiyuan: [], name: [], niandai: [], photo1: [], photo2: [], zuozhe: [] };
        const right = {isBook: [], laiyuan: [], name: [], niandai: [], photo1: [], photo2: [], zuozhe: [] };
        isBookT.map((item, index)=>{
            if(item.trim() === ''){
                left.isBook.push(item);
                left.photo1.push(photo1T[index]);
                left.laiyuan.push(laiyuanT[index]);
                left.name.push(nameT[index]);
            } else if(item.trim() === '1') {
                right.isBook.push(item);
                right.photo1.push(photo1T[index]);
                right.laiyuan.push(laiyuanT[index]);
                right.name.push(nameT[index]);
            }
        })
        setLeft(left);
        setRight(right);
    }

    return <View
        style={{
            padding: 20,
            paddingTop: 120,
            backgroundColor: '#fff',
            boxSizing: 'border-box;',
            position: 'relative',
        }}>
        <View style={{position: 'absolute', top: 10, left: 20, width: '100%'}}>
            <Text style={{fontWeight: 'bold', fontSize: 18, textAlign: 'center'}}>
                包含{route.params.tempIpt}的印蜕
            </Text>
            <Text
                style={{
                    color: '#696969',
                    fontSize: 12,
                    paddingTop: 10,
                    textAlign: 'center',
                }}>
                (如有侵权，请即刻联系scut2459309859，立删)
            </Text>
        </View>
        <View style={styles.sealNav}>
            <Button
                style={styles.seals}
                onPress={() => {
                    setCut(true);
                }}>
                <View _text={{lineHeight: 20}}>
                    <Text>零散印蜕{leftData.laiyuan !== undefined && leftData.laiyuan.length - 1}枚</Text>
                </View>
            </Button>
            <Button
                style={styles.seals}
                onPress={() => {
                    setCut(false);
                }}>
                <View _text={{lineHeight: 20}}>
                    <Text>辑录印蜕{rightData.laiyuan !== undefined && rightData.laiyuan.length}枚</Text>
                </View>
            </Button>
        </View>
        {cut&&<NewNavLeft datas={leftData} navigation={navigation}/>}
        {!cut&&<NewNavRight datas={rightData} navigation={navigation}/>}
    </View>;
}

const styles = StyleSheet.create({
    sealNav: {
        backgroundColor: '#fff',
        width: '100%',
        height: 40,
        position: 'absolute',
        top: 50,
        left: 20,
        flexDirection: 'row',
        justifyContent: 'space-between',
        marginTop: 20,
    },
    seals: {
        backgroundColor: '#f2f2f2',
        height: '100%',
        width: '47%',
        borderRadius: 3,
    },
    contentVessels: {
        backgroundColor: '#fff',
        width: '100%',
        flex: 1,
        flexDirection: 'row',
        flexWrap: 'wrap',
        justifyContent: 'space-between',
        marginTop: 20,
    },
    content: {
        backgroundColor: '#fff',
        height: 150,
        width: '47%',
        borderRadius: 10,
        marginBottom: 20,
    },
    imgVessels: {
        width: '100%',
        height: 120,
        backgroundColor: '#f2f2f2',
        borderRadius: 3,
    },
    img: {
        width: '100%',
        height: '100%',
        backgroundSize: 'over',
    },
});